<!--  -->
<template>
  <el-dialog title="设置邮箱" :visible.sync="dialogShow" :width="'480px'" :close-on-click-modal="false" @close="close">
    <div class="add-container-u" v-loading="loading">
      <div v-for="(item, index) in emails" :key="index" class="item">
      <el-form :rules="rules" :model="item" :inline="true" ref="formValidate">
        <el-form-item label="" label-width="'0px'" style="margin-bottom: 0px;" prop="value">
          <el-input placeholder="请输入接收通知的邮箱" size="medium" style="width: 440px;" maxlength="128"
            v-model="item.value">
          </el-input>
          </el-form-item>
          <!-- <el-form-item>
            <span class="item-opt">
              <el-button v-if="(index + 1) === emails.length && emails.length <= 3" @click="addEmail" type="primary"
                size="mini" icon="el-icon-circle-plus-outline">
              </el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" v-if="emails.length > 1" @click="delEmail(index)"></el-button>
            </span>
          </el-form-item> -->
      </el-form>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="close">取消</el-button>
      <el-button size="small" type="primary" @click="saveclose">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    reSetData: {
      type: Function
    }
  },
  created () {
  },
  data () {
    var checkEmail = (rule, value, callback) => {
      let emailReg = /^[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)*@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (emailReg.test(value) || value === '') {
        return callback()
      } else {
        callback(new Error('邮箱格式错误'))
      }
    }
    return {
      dialogShow: false,
      formLabelWidth: '80px',
      loading: true,
      emailData: {},
      emails: [],
      rules: {
        value: [
          { required: false, message: '请输入邮箱地址', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
  },
  methods: {
    show (data) {
      this.dialogShow = true
      this.emailData = data
      let emailArray = this.emailData.emailAddress.split(',')
      if (emailArray.length > 0) {
        emailArray.forEach((item, index) => {
          let info = {
            id: index,
            value: item
          }
          this.emails.push(info)
        })
      } else {
        let info = {
          id: 0,
          value: ''
        }
        this.emails.push(info)
      }
      this.loading = false
    },
    addEmail () {
      let info = {
        id: this.emails.length,
        value: ''
      }
      this.emails.push(info)
    },
    delEmail (index) {
      this.emails.splice(index, 1)
      if (this.$refs['formValidate']) {
        this.$refs['formValidate'].map((item, idx) => {
          if (idx === index) {
            item.clearValidate()
          }
        })
      }
    },
    close () {
      this.dialogShow = false
      this.emailData = {}
      this.emails = []
      if (this.$refs['formValidate']) {
        this.$refs['formValidate'].map(item => {
          item.clearValidate()
        })
      }
    },
    saveclose () {
      if (this.loading) {
        return
      }
      let str = ''
      this.emails.forEach(item => {
        str += item.value + ','
      })
      let emailAddress = str.slice(0, str.length - 1)
      let param = {
        type: this.emailData.type,
        emailAddress: emailAddress

      }
      let bool = true
      this.$refs['formValidate'].map(item => {
        item.validate((valid) => {
          if (!valid) {
            bool = false
          }
        })
      })
      if (bool) {
        this.loading = true
        this.$post('/host/update-email-remind-address', param).then(response => {
          if (response) {
            this.reSetData(response)
            this.loading = false
            this.close()
          }
        })
      } else {
        this.loading = false
      }
    }
  },
  components: {
  }
}
</script>

<style scoped lang="scss">
.add-container-u{
  /deep/ .el-button--mini{
    padding: 7px;
  }
  .item .item-opt {
    float: right;
  }
}

</style>
